<template>
  <div class="rescue-container">
     
    <el-card class="rescue-card">
        <div slot="header" class="card-header">
          <span class="title">灾区物资储备</span>
          <el-tag type="success">历史数据</el-tag>
        </div>
        
        <div class="card-content">
          <el-table
            :data="materialData"
            style="width: 100%"
            height="300"
            v-loading="loading"
          >
            <el-table-column prop="departName" label="储备单位" width="150" />
            <el-table-column prop="name" label="物资名称" width="150" />
            <el-table-column prop="count" label="数量"></el-table-column>
            <el-table-column label="操作" width="120">
              <template slot-scope="{row}">
                <el-button 
                  type="text" 
                  size="small"
                  @click="showMaterialLocation(row)"
                >
                  查看位置
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>

       <!-- 内容区域 -->
      <el-card class="rescue-card">
        <div slot="header" class="card-header">
          <span class="title">灾情统计</span>
          <el-tag type="success">历史数据</el-tag>
        </div>
        <div class="card-content " style="display: flex; flex-direction: column; gap: 16px;">

        <!-- 统计卡片 -->
   
           <stat-card  
                title="受灾人口"
                :value="stats.affectedPopulation"
                icon="el-icon-user-solid"
                color="#f56c6c"
                unit="万人"
              />

              <stat-card 
                title="受灾面积"
                :value="stats.affectedArea"
                icon="el-icon-map-location"
                color="#67c23a"
                unit="平方公里"
              />
    
              <stat-card 
                title="受灾单位"
                :value="stats.affectedCount"
                icon="el-icon-money"
                color="#e6a23c"
                unit="个"
          />
      </div>
    </el-card>

    <el-card class="rescue-card">
        <div slot="header" class="card-header">
          <span class="title">受灾单位情况</span>
          <el-tag type="success">历史数据</el-tag>
        </div>
        <div class="card-content">
        <depart-info-table ref="departInfo" :data="disasterData"></depart-info-table>
      </div>
      </el-card>
      
      </div>
  </template>
  
  <script lang="ts">
  import { Component, Vue, Prop, Watch,Ref } from 'vue-property-decorator';
  import { Card, Tabs, TabPane, Table, TableColumn, Tag, Progress, Button } from 'element-ui';
  import StatCard from '@/views/app/components/StatCard.vue';
  import DepartInfoTable from '@/views/app/components/DepartInfoTable.vue';
  import WaterLevelChart from '@/views/app/components/WaterLevelChart.vue';
  
  
  interface DisasterStats {
    affectedPopulation: number;
    affectedArea: number;
    affectedCount: number;
  }
  
  interface DisasterDetail {
    area: string;
    waterLevel: number;
    affected: number;
    status: number;
  }
  
  @Component({
    components: {
      ElCard: Card,
      ElTabs: Tabs,
      ElTabPane: TabPane,
      ElTable: Table,
      ElTableColumn: TableColumn,
      ElTag: Tag,
      ElProgress: Progress,
      ElButton: Button,
      StatCard,
      WaterLevelChart,
      DepartInfoTable
    }
  })
  export default class DisasterInfoCard extends Vue {
    private stats: DisasterStats ={
      affectedPopulation: 0,
      affectedArea: 0,
      affectedCount: 0,
    }
    @Prop({ default: () => [] }) private details!: DisasterDetail[];
    @Ref('departInfo') departInfo
    materialData:any =[];
    private waterLevelData =[];
    disasterData =[];
    private chartKey = 0;
    maxWaterLevel=20;
    private isCollapsed:any = [true,false];
    private loading = false;
  
    // 状态类型映射
    private statusType(status: number): string {
      const types = ['', 'success', 'warning', 'danger'];
      return types[status] || '';
    }
  
    // 状态文本映射
    private statusText(status: number): string {
      const texts = ['正常', '警戒', '危险', '紧急'];
      return texts[status] || '';
    }
  
    // 水位进度条颜色
    private customColor(percentage: number): string {
      if (percentage > 90) return '#f56c6c';
      if (percentage > 70) return '#e6a23c';
      return '#67c23a';
    }
  
    private toggleCollapse(index): void {

      this.chartKey ++;
      this.$set(this.isCollapsed, index, !this.isCollapsed[index]);
      this.$emit('toggle-collapse', this.isCollapsed);
    }
  
    private handleTabChange(tab: any): void {
      this.$emit('tab-change', tab.name);
    }
  
    private handleMarkerClick(marker: any): void {
      this.$emit('marker-select', marker);
    }
    showMaterialLocation(row){
      console.log(row);
    }
  
    @Watch('details')
    private onDetailsChange(newVal: DisasterDetail[]): void {
      this.maxWaterLevel = Math.max(...newVal.map(d => d.waterLevel), 10);
    }

    mounted(){
      (this as any).$bus.$on("disasterStatus",st =>{
        this.stats = st;
      });
      (this as any).$bus.$on("waterLevelListHandler",wl =>{
        this.waterLevelData =wl;
      
      });
      (this as any).$bus.$on("materialData",materialData =>{
        this.materialData =materialData;
      
      });

      (this as any).$bus.$on("disasterData",disasterData =>{
       
        this.disasterData =disasterData;
      //  this.departInfo.processData();
      
      });
    }
  }
  </script>
  
  <style lang="scss" scoped>
 .rescue-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  padding: 20px;
  height: 100%;

  > :last-child {
    grid-column: 1 / -1;
  }

  @media (max-width: 1200px) {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    
    > :last-child {
      grid-column: 1 / -1;
    }
  }
}

.rescue-card {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  min-height: 400px;
  
  .el-card__body {
    height: calc(100% - 52px);
    display: flex;
    flex-direction: column;
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .title {
      font-size: 16px;
      font-weight: bold;
    }
  }

  .card-content {
    padding: 10px 0;
    flex: 1;
    overflow: hidden;
  }
}
  </style>